<template>
  <div id="devicePlayer" v-loading="isLoging">
    <el-dialog
        title="视频播放"
        top="0"
        :close-on-click-modal="false"
        v-model="showVideoDialog"
        @close="close()"
        v-if="showVideoDialog"
    >
      <div style="width: 100%; height: 100%">
        <el-tabs
            type="card"
            :stretch="true"
            v-model="activePlayer"
            @tab-click="changePlayer"
            v-if="Object.keys(this.player).length > 1"
        >
          <el-tab-pane label="Jessibuca" name="jessibuca">
            <jessibucaPlayer
                v-if="activePlayer == 'jessibuca'"
                ref="jessibuca"
                v-model="showVideoDialog"
                :videoUrl="videoUrl"
                :error="videoError"
                :message="videoError"
                style="height: 515px"
                :hasAudio="hasAudio"
                fluent
                autoplay
                live
            ></jessibucaPlayer>
          </el-tab-pane>
          <el-tab-pane label="WebRTC" name="webRTC">
            <rtc-player
                v-if="activePlayer === 'webRTC'"
                ref="webRTC"
                @screenshot="shot"
                webRtcPlayerBox="webRtc"
                v-model="showVideoDialog"
                :videoUrl="videoUrl"
                :error="videoError"
                :message="videoError"
                height="100px"
                :hasAudio="hasAudio"
                fluent
                autoplay
                live
            ></rtc-player>
          </el-tab-pane>
        </el-tabs>
        <jessibucaPlayer
            v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
            ref="jessibuca"
            v-model="showVideoDialog"
            :videoUrl="videoUrl"
            :error="videoError"
            :message="videoError"
            height="100px"
            :hasAudio="hasAudio"
            fluent
            autoplay
            live
        ></jessibucaPlayer>
        <rtc-player
            v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
            ref="jessibuca"
            @screenshot="shot"
            webRtcPlayerBox="webRtc"
            v-model="showVideoDialog"
            :videoUrl="videoUrl"
            :error="videoError"
            :message="videoError"
            height="100px"
            :hasAudio="hasAudio"
            fluent
            autoplay
            live
        ></rtc-player>
      </div>
      <div id="shared" style="text-align: right; margin-top: 1rem">
        <el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
          <el-tab-pane label="实时视频" name="media">
            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem">
              <span style="width: 5rem; line-height: 2.5rem; text-align: right"
              >播放地址：</span
              >
              <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" name="sharedIframeInput">
                <template #append>
                  <el-button
                      icon="CopyDocument"
                      title="点击拷贝"
                      v-copyText="getPlayerShared.sharedUrl"
                  ></el-button>
                </template>
              </el-input>
            </div>
            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem">
              <span style="width: 5rem; line-height: 2.5rem; text-align: right"
              >iframe：</span
              >
              <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" name="sharedIframeInput">
                <template #append>
                  <el-button
                      icon="CopyDocument"
                      title="点击拷贝"
                      v-copyText="getPlayerShared.sharedIframe"
                  ></el-button>
                </template>
              </el-input>
            </div>
            <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem">
              <span style="width: 5rem; line-height: 2.5rem; text-align: right"
              >资源地址：</span
              >
              <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true">\
                <template #append>
                  <el-button
                      slot="append"
                      icon="CopyDocument"
                      title="点击拷贝"
                      v-copyText="getPlayerShared.sharedRtmp"
                  ></el-button>
                </template>
                <template #prepend>
                  <el-dropdown
                      slot="prepend"
                      v-if="streamInfo"
                      trigger="click"
                      @command="copyUrl"
                  >
                    <el-button>
                      更多地址
                      <el-icon>
                        <ArrowDown/>
                      </el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                            v-if="streamInfo.flv"
                            :command="streamInfo.flv"
                        >
                          <el-tag>FLV:</el-tag>
                          <span>{{ streamInfo.flv }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.https_flv"
                            :command="streamInfo.https_flv"
                        >
                          <el-tag>FLV(https):</el-tag>
                          <span>{{ streamInfo.https_flv }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.ws_flv"
                            :command="streamInfo.ws_flv"
                        >
                          <el-tag>FLV(ws):</el-tag>
                          <span>{{ streamInfo.ws_flv }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.wss_flv"
                            :command="streamInfo.wss_flv"
                        >
                          <el-tag>FLV(wss):</el-tag>
                          <span>{{ streamInfo.wss_flv }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.fmp4"
                            :command="streamInfo.fmp4"
                        >
                          <el-tag>FMP4:</el-tag>
                          <span>{{ streamInfo.fmp4 }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.https_fmp4"
                            :command="streamInfo.https_fmp4"
                        >
                          <el-tag>FMP4(https):</el-tag>
                          <span>{{ streamInfo.https_fmp4 }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.ws_fmp4"
                            :command="streamInfo.ws_fmp4"
                        >
                          <el-tag>FMP4(ws):</el-tag>
                          <span>{{ streamInfo.ws_fmp4 }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.wss_fmp4"
                            :command="streamInfo.wss_fmp4"
                        >
                          <el-tag>FMP4(wss):</el-tag>
                          <span>{{ streamInfo.wss_fmp4 }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.hls"
                            :command="streamInfo.hls"
                        >
                          <el-tag>HLS:</el-tag>
                          <span>{{ streamInfo.hls }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.https_hls"
                            :command="streamInfo.https_hls"
                        >
                          <el-tag>HLS(https):</el-tag>
                          <span>{{ streamInfo.https_hls }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.ws_hls"
                            :command="streamInfo.ws_hls"
                        >
                          <el-tag>HLS(ws):</el-tag>
                          <span>{{ streamInfo.ws_hls }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.wss_hls"
                            :command="streamInfo.wss_hls"
                        >
                          <el-tag>HLS(wss):</el-tag>
                          <span>{{ streamInfo.wss_hls }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.ts"
                            :command="streamInfo.ts"
                        >
                          <el-tag>TS:</el-tag>
                          <span>{{ streamInfo.ts }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.https_ts"
                            :command="streamInfo.https_ts"
                        >
                          <el-tag>TS(https):</el-tag>
                          <span>{{ streamInfo.https_ts }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.ws_ts"
                            :command="streamInfo.ws_ts"
                        >
                          <el-tag>TS(ws):</el-tag>
                          <span>{{ streamInfo.ws_ts }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.wss_ts"
                            :command="streamInfo.wss_ts"
                        >
                          <el-tag>TS(wss):</el-tag>
                          <span>{{ streamInfo.wss_ts }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtc"
                            :command="streamInfo.rtc"
                        >
                          <el-tag>RTC:</el-tag>
                          <span>{{ streamInfo.rtc }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtcs"
                            :command="streamInfo.rtcs"
                        >
                          <el-tag>RTCS:</el-tag>
                          <span>{{ streamInfo.rtcs }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtmp"
                            :command="streamInfo.rtmp"
                        >
                          <el-tag>RTMP:</el-tag>
                          <span>{{ streamInfo.rtmp }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtmps"
                            :command="streamInfo.rtmps"
                        >
                          <el-tag>RTMPS:</el-tag>
                          <span>{{ streamInfo.rtmps }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtsp"
                            :command="streamInfo.rtsp"
                        >
                          <el-tag>RTSP:</el-tag>
                          <span>{{ streamInfo.rtsp }}</span>
                        </el-dropdown-item>
                        <el-dropdown-item
                            v-if="streamInfo.rtsps"
                            :command="streamInfo.rtsps"
                        >
                          <el-tag>RTSPS:</el-tag>
                          <span>{{ streamInfo.rtsps }}</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-input>
            </div>
          </el-tab-pane>
          <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
          <!--遥控界面-->
<!--          <el-tab-pane label="云台控制" name="control" v-if="showPtz">-->
<!--            <div style="display: flex; justify-content: left">-->
<!--              <div class="control-wrapper">-->
<!--                <div-->
<!--                    class="control-btn control-top"-->
<!--                    @mousedown="ptzCamera('up')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <el-icon>-->
<!--                    <ArrowUpBold/>-->
<!--                  </el-icon>-->
<!--                  <div class="control-inner-btn control-inner"></div>-->
<!--                </div>-->
<!--                <div-->
<!--                    class="control-btn control-left"-->
<!--                    @mousedown="ptzCamera('left')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <el-icon>-->
<!--                    <ArrowLeftBold/>-->
<!--                  </el-icon>-->
<!--                  <div class="control-inner-btn control-inner"></div>-->
<!--                </div>-->
<!--                <div-->
<!--                    class="control-btn control-bottom"-->
<!--                    @mousedown="ptzCamera('down')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <el-icon>-->
<!--                    <ArrowDownBold/>-->
<!--                  </el-icon>-->
<!--                  <div class="control-inner-btn control-inner"></div>-->
<!--                </div>-->
<!--                <div-->
<!--                    class="control-btn control-right"-->
<!--                    @mousedown="ptzCamera('right')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <el-icon>-->
<!--                    <ArrowRightBold/>-->
<!--                  </el-icon>-->
<!--                  <div class="control-inner-btn control-inner"></div>-->
<!--                </div>-->
<!--                <div class="control-round">-->
<!--                  <div class="control-round-inner">-->
<!--                    <i class="fa fa-pause-circle"></i>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div-->
<!--                    style="position: absolute; left: 7.25rem; top: 1.25rem"-->
<!--                    @mousedown="ptzCamera('zoomin')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <i-->
<!--                      class="el-icon-zoom-in control-zoom-btn"-->
<!--                      style="font-size: 1.875rem"-->
<!--                  ></i>-->
<!--                </div>-->
<!--                <div-->
<!--                    style="-->
<!--                    position: absolute;-->
<!--                    left: 7.25rem;-->
<!--                    top: 3.25rem;-->
<!--                    font-size: 1.875rem;-->
<!--                  "-->
<!--                    @mousedown="ptzCamera('zoomout')"-->
<!--                    @mouseup="ptzCamera('stop')"-->
<!--                >-->
<!--                  <i class="el-icon-zoom-out control-zoom-btn"></i>-->
<!--                </div>-->
<!--                <div-->
<!--                    class="contro-speed"-->
<!--                    style="position: absolute; left: 4px; top: 7rem; width: 9rem"-->
<!--                >-->
<!--                  <el-slider v-model="controSpeed" :max="255"></el-slider>-->
<!--                </div>-->
<!--              </div>-->

<!--              <div class="control-panel">-->
<!--                <el-button-group>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 0rem;-->
<!--                      top: 0rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >预置位编号-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 5rem;-->
<!--                      top: 0rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="presetPos"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :step="1"-->
<!--                      :min="1"-->
<!--                      :max="255"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 11rem;-->
<!--                      top: 0rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-add-location"-->
<!--                      @click="presetPosition(129, presetPos)"-->
<!--                  >设置-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 27rem;-->
<!--                      top: 0rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      type="primary"-->
<!--                      icon="el-icon-place"-->
<!--                      @click="presetPosition(130, presetPos)"-->
<!--                  >调用-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 16rem;-->
<!--                      top: 0rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-delete-location"-->
<!--                      @click="presetPosition(131, presetPos)"-->
<!--                  >删除-->
<!--                  </el-button>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 0rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >巡航速度-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 5rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="cruisingSpeed"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :min="1"-->
<!--                      :max="4095"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 11rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-loading"-->
<!--                      @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)"-->
<!--                  >设置-->
<!--                  </el-button>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 16rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >停留时间-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 21rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="cruisingTime"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :min="1"-->
<!--                      :max="4095"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 27rem;-->
<!--                      top: 2.5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-timer"-->
<!--                      @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)"-->
<!--                  >设置-->
<!--                  </el-button>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 0rem;-->
<!--                      top: 4.5rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >巡航组编号-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 5rem;-->
<!--                      top: 4.5rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="cruisingGroup"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :min="0"-->
<!--                      :max="255"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 11rem;-->
<!--                      top: 4.5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-add-location"-->
<!--                      @click="setCommand(132, cruisingGroup, presetPos)"-->
<!--                  >添加点-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 16rem;-->
<!--                      top: 4.5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-delete-location"-->
<!--                      @click="setCommand(133, cruisingGroup, presetPos)"-->
<!--                  >删除点-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 21rem;-->
<!--                      top: 4.5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-delete"-->
<!--                      @click="setCommand(133, cruisingGroup, 0)"-->
<!--                  >删除组-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 27rem;-->
<!--                      top: 5rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      type="primary"-->
<!--                      icon="el-icon-video-camera-solid"-->
<!--                      @click="setCommand(136, cruisingGroup, 0)"-->
<!--                  >巡航-->
<!--                  </el-button>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 0rem;-->
<!--                      top: 7rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >扫描速度-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 5rem;-->
<!--                      top: 7rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="scanSpeed"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :min="1"-->
<!--                      :max="4095"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 11rem;-->
<!--                      top: 7rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-loading"-->
<!--                      @click="setSpeedOrTime(138, scanGroup, scanSpeed)"-->
<!--                  >设置-->
<!--                  </el-button>-->
<!--                  <el-tag-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 0rem;-->
<!--                      top: 9rem;-->
<!--                      width: 5rem;-->
<!--                      text-align: center;-->
<!--                    "-->
<!--                      size="small"-->
<!--                  >扫描组编号-->
<!--                  </el-tag>-->
<!--                  <el-input-number-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 5rem;-->
<!--                      top: 9rem;-->
<!--                      width: 6rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      v-model="scanGroup"-->
<!--                      controls-position="right"-->
<!--                      :precision="0"-->
<!--                      :step="1"-->
<!--                      :min="0"-->
<!--                      :max="255"-->
<!--                  ></el-input-number>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 11rem;-->
<!--                      top: 9rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-d-arrow-left"-->
<!--                      @click="setCommand(137, scanGroup, 1)"-->
<!--                  >左边界-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 16rem;-->
<!--                      top: 9rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      icon="el-icon-d-arrow-right"-->
<!--                      @click="setCommand(137, scanGroup, 2)"-->
<!--                  >右边界-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 27rem;-->
<!--                      top: 7rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      type="primary"-->
<!--                      icon="el-icon-video-camera-solid"-->
<!--                      @click="setCommand(137, scanGroup, 0)"-->
<!--                  >扫描-->
<!--                  </el-button>-->
<!--                  <el-button-->
<!--                      style="-->
<!--                      position: absolute;-->
<!--                      left: 27rem;-->
<!--                      top: 9rem;-->
<!--                      width: 5rem;-->
<!--                    "-->
<!--                      size="small"-->
<!--                      type="danger"-->
<!--                      icon="el-icon-switch-button"-->
<!--                      @click="ptzCamera('stop')"-->
<!--                  >停止-->
<!--                  </el-button>-->
<!--                </el-button-group>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="编码信息" name="codec" v-loading="tracksLoading">
            <p>
              无法播放或者没有声音?&nbsp&nbsp&nbsp试一试&nbsp
              <el-button
                  size="small"
                  type="primary"
                  v-if="!coverPlaying"
                  @click="coverPlay"
              >转码播放
              </el-button
              >
              <el-button
                  size="small"
                  type="danger"
                  v-if="coverPlaying"
                  @click="convertStopClick"
              >停止转码
              </el-button
              >
            </p>
            <div class="trank">
              <p
                  v-if="tracksNotLoaded"
                  style="text-align: center; padding-top: 3rem"
              >
                暂无数据
              </p>
              <div
                  v-for="(item, index) in tracks"
                  style="width: 50%; float: left"
                  loading
              >
                <span>流 {{ index }}</span>
                <div class="trankInfo" v-if="item.codec_type == 0">
                  <p>格式: {{ item.codec_id_name }}</p>
                  <p>类型: 视频</p>
                  <p>分辨率: {{ item.width }} x {{ item.height }}</p>
                  <p>帧率: {{ item.fps }}</p>
                </div>
                <div class="trankInfo" v-if="item.codec_type == 1">
                  <p>格式: {{ item.codec_id_name }}</p>
                  <p>类型: 音频</p>
                  <p>采样位数: {{ item.sample_bit }}</p>
                  <p>采样率: {{ item.sample_rate }}</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="语音对讲" name="broadcast">
            <div style="padding: 0 10px">
              <el-switch
                  v-model="broadcastMode"
                  :disabled="broadcastStatus !== -1"
                  active-color="#409EFF"
                  active-text="喊话(Broadcast)"
                  inactive-text="对讲(Talk)"
              ></el-switch>
            </div>
            <div class="trank" style="text-align: center">
              <el-button
                  @click="broadcastStatusClick()"
                  :type="getBroadcastStatus()"
                  :disabled="broadcastStatus == -2"
                  icon="Microphone"
                  style="font-size: 32px; padding: 24px; margin-top: 24px; width:80px;height:80px;border-radius: 50%;"
              />
              <p>
                <span v-if="broadcastStatus == -2">正在释放资源</span>
                <span v-if="broadcastStatus == -1">点击开始对讲</span>
                <span v-if="broadcastStatus == 0">等待接通中...</span>
                <span v-if="broadcastStatus == 1">请说话</span>
              </p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import rtcPlayer from './rtcPlayer.vue'
import jessibucaPlayer from '../common/jessibuca.vue'
import {convertStream} from "@/api/video_monitor/channel";
import {useUserStore} from '@/store/modules/user';
import md5 from "js-md5";
import {
  broadcast,
  broadcastStop,
  convertStop,
  frontEndCommand,
  getMediaInfo,
  ptzControl
} from "@/api/video_monitor/devicePlayer";
import ZLMRTCClient from "@/assets/js/ZLMRTCClient";
import {copyTextToClipboard} from "@/directive/common/copyText";

export default {
  name: 'devicePlayer',
  props: {},
  components: {
    jessibucaPlayer,
    rtcPlayer,
  },
  computed: {
    getPlayerShared: function () {
      return {
        sharedUrl:
            window.location.origin +
            '/#/play/wasm/' +
            encodeURIComponent(this.videoUrl),
        sharedIframe:
            '' +
            window.location.origin +
            '<iframe src="/plus-ui/public#/play/wasm/"></iframe>' +
            encodeURIComponent(this.videoUrl) +
            '',
        sharedRtmp: this.videoUrl,
      }
    },
  },
  created() {
    console.log('created')
    console.log(this.player)
    this.broadcastStatus = -1
    if (Object.keys(this.player).length == 1) {
      this.activePlayer = Object.keys(this.player)[0]
    }
  },
  data() {
    return {
      video:
          'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
      videoUrl: '',
      activePlayer: 'jessibuca',
      // 如何你只是用一种播放器，直接注释掉不用的部分即可
      player: {
        jessibuca: ['ws_flv', 'wss_flv'],
        webRTC: ['rtc', 'rtcs'],
      },
      showVideoDialog: false,
      streamId: '',
      app: '',
      mediaServerId: '',
      convertKey: '',
      deviceId: '',
      channelId: '',
      tabActiveName: 'media',
      hasAudio: false,
      loadingRecords: false,
      recordsLoading: false,
      isLoging: false,
      controSpeed: 30,
      timeVal: 0,
      timeMin: 0,
      timeMax: 1440,
      presetPos: 1,
      cruisingSpeed: 100,
      cruisingTime: 5,
      cruisingGroup: 0,
      scanSpeed: 100,
      scanGroup: 0,
      tracks: [],
      coverPlaying: false,
      tracksLoading: false,
      showPtz: true,
      showRrecord: true,
      tracksNotLoaded: false,
      sliderTime: 0,
      seekTime: 0,
      recordStartTime: 0,
      showTimeText: '00:00:00',
      streamInfo: null,
      broadcastMode: false,
      broadcastRtc: null,
      broadcastStatus: -1, // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功
    }
  },
  methods: {
    tabHandleClick: function (tab, event) {
      console.log(tab)
      var that = this
      that.tracks = []
      that.tracksLoading = true
      that.tracksNotLoaded = false
      if (tab.props.name === 'codec') {
        getMediaInfo(this.mediaServerId, this.app, this.streamId).then(function (res) {
          console.log("编码信息", res);
          that.tracksLoading = false
          if (res.code == 0 && res.tracks) {
            that.tracks = res.tracks
          } else {
            that.tracksNotLoaded = true
            ElMessage.warning('获取编码信息失败')
          }
        })
            .catch(function (e) {
            })
      }
    },
    changePlayer: function (tab, event) {
      console.log("changePlayer", tab, event);
      this.activePlayer = tab.props.name
      this.videoUrl = this.getUrlByStreamInfo()
      console.log(this.videoUrl)
    },
    openDialog: function (tab, deviceId, channelId, param) {
      if (this.showVideoDialog) {
        return
      }
      this.tabActiveName = tab
      this.channelId = channelId
      this.deviceId = deviceId
      this.streamId = ''
      this.mediaServerId = ''
      this.app = ''
      this.videoUrl = ''
      if (!!this.$refs[this.activePlayer]) {
        this.$refs[this.activePlayer].pause()
      }
      switch (tab) {
        case 'media':
          this.play(param.streamInfo, param.hasAudio)
          break
        case 'streamPlay':
          this.tabActiveName = 'media'
          this.showRrecord = false
          this.showPtz = false
          this.play(param.streamInfo, param.hasAudio)
          break
        case 'control':
          break
      }
    },
    play: function (streamInfo, hasAudio) {
      this.streamInfo = streamInfo
      this.hasAudio = hasAudio
      this.isLoging = false
      this.videoUrl = this.getUrlByStreamInfo()
      this.streamId = streamInfo.stream
      this.app = streamInfo.app
      this.mediaServerId = streamInfo.mediaServerId
      this.playFromStreamInfo(false, streamInfo)
    },
    getUrlByStreamInfo() {
      console.log(this.streamInfo)
      if (location.protocol == 'https:') {
        this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]]
      } else {
        this.videoUrl = this.streamInfo[this.player[this.activePlayer][0]]
      }
      return this.videoUrl
    },
    coverPlay: function () {
      var that = this
      this.coverPlaying = true
      this.$refs[this.activePlayer].pause()
      convertStream(that.streamId).then(function (res) {
        if (res.code == 200) {
          that.convertKey = res.data.key
          setTimeout(() => {
            that.isLoging = false
            that.playFromStreamInfo(false, res.data)
          }, 2000)
        } else {
          that.isLoging = false
          that.coverPlaying = false
          ElMessage.error('转码失败');
        }
      })
          .catch(function (e) {
            console.log(e)
            that.coverPlaying = false
            ElMessage.error('播放错误');
          })
    },
    convertStopClick: function () {
      this.convertStop(() => {
        this.$refs[this.activePlayer].play(this.videoUrl)
      })
    },
    convertStop: function (callback) {
      var that = this
      that.$refs.videoPlayer.pause()
      convertStop(this.convertKey).then(function (res) {
        if (res.code == 200) {
          console.log(res.msg)
        } else {
          console.error(res.msg)
        }
        if (callback) callback()
      })
          .catch(function (e) {
          })
      that.coverPlaying = false
      that.convertKey = ''
      // if (callback )callback();
    },

    playFromStreamInfo: function (realHasAudio, streamInfo) {
      console.log('播放视频');
      this.showVideoDialog = true
      this.hasaudio = realHasAudio && this.hasaudio
      if (this.$refs[this.activePlayer]) {
        this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
      } else {
        this.$nextTick(() => {
          this.$refs[this.activePlayer].play(
              this.getUrlByStreamInfo(streamInfo)
          )
        })
      }
    },
    close: function () {
      console.log('关闭视频')
      if (!!this.$refs[this.activePlayer]) {
        this.$refs[this.activePlayer].pause()
      }
      this.videoUrl = ''
      this.coverPlaying = false
      this.showVideoDialog = false
      if (this.convertKey != '') {
        this.convertStop()
      }
      this.convertKey = ''
      this.stopBroadcast()
    },

    ptzCamera: function (command) {
      console.log('云台控制：' + command)
      ptzControl(this.deviceId, this.channelId, command, this.controSpeed, this.controSpeed, this.controSpeed).then(function (res) {
      })
    },
    //////////////////////播放器事件处理//////////////////////////
    videoError: function (e) {
      console.log('播放器错误：' + JSON.stringify(e))
    },
    presetPosition: function (cmdCode, presetPos) {
      console.log(
          '预置位控制：' + this.presetPos + ' : 0x' + cmdCode.toString(16)
      )
      frontEndCommand(this.deviceId, this.channelId, cmdCode, 0, presetPos, 0).then(function (res) {
      })
    },
    setSpeedOrTime: function (cmdCode, groupNum, parameter) {
      let parameter2 = parameter % 256
      let combindCode2 = Math.floor(parameter / 256) * 16
      console.log(
          '前端控制：0x' +
          cmdCode.toString(16) +
          ' 0x' +
          groupNum.toString(16) +
          ' 0x' +
          parameter2.toString(16) +
          ' 0x' +
          combindCode2.toString(16)
      )
      frontEndCommand(this.deviceId, this.channelId, cmdCode, groupNum, parameter2, combindCode2).then(function (res) {
      })
    },
    setCommand: function (cmdCode, groupNum, parameter) {
      let that = this
      console.log(
          '前端控制：0x' +
          cmdCode.toString(16) +
          ' 0x' +
          groupNum.toString(16) +
          ' 0x' +
          parameter.toString(16) +
          ' 0x0'
      )
      frontEndCommand(this.deviceId, this.channelId, cmdCode, groupNum, parameter, 0).then(function (res) {
      })
    },
    copyUrl: function (dropdownItem) {
      console.log('复制地址')
      console.log(dropdownItem)
      let copyTextToClipboard1 = copyTextToClipboard(dropdownItem);
      if (copyTextToClipboard1) {
        ElMessage.success('复制成功');
      } else {
        ElMessage.error('复制失败');
      }
    },
    getBroadcastStatus() {
      if (this.broadcastStatus == -2) {
        return 'primary'
      }
      if (this.broadcastStatus == -1) {
        return 'primary'
      }
      if (this.broadcastStatus == 0) {
        return 'warning'
      }
      if (this.broadcastStatus == 1) {
        return 'danger'
      }
    },
    broadcastStatusClick() {
      if (this.broadcastStatus == -1) {
        // 默认状态， 开始
        this.broadcastStatus = 0
        broadcast(this.deviceId, this.channelId, 30, this.broadcastMode).then((res) => {
          let streamInfo = res.data.streamInfo
          if (document.location.protocol.includes('https')) {
            this.startBroadcast(streamInfo.rtcs)
          } else {
            this.startBroadcast(streamInfo.rtc)
          }
        })
      } else if (this.broadcastStatus == 1) {
        this.broadcastStatus = -1
        this.broadcastRtc.close()
      }
    },
    startBroadcast(url) {
      // 获取推流鉴权Key
      const userStore = useUserStore();
      let pushKey = userStore.pushKey;
      url += "&sign=" + md5.md5(pushKey)
      console.log('开始语音喊话： ' + url)
      this.broadcastRtc = new ZLMRTCClient.Endpoint({
        debug: true, // 是否打印日志
        zlmsdpUrl: url, //流地址
        simulecast: false,
        useCamera: false,
        audioEnable: true,
        videoEnable: false,
        recvOnly: false,
      })

      // webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
      //   console.error('播放成功',e.streams)
      //   this.broadcastStatus = 1;
      // });
      //
      // webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
      //   this.broadcastStatus = 1;
      //   // document.getElementById('selfVideo').srcObject=s;
      //   // this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
      // });

      this.broadcastRtc.on(
          ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT,
          (e) => {
            // 获取到了本地流
            console.error('不支持webrtc', e)
            ElMessage({message: '不支持webrtc, 无法进行语音喊话', type: 'error'});
            this.broadcastStatus = -1
          }
      )

      this.broadcastRtc.on(
          ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
          (e) => {
            // ICE 协商出错
            console.error('ICE 协商出错')
            ElMessage({message: 'ICE 协商出错', type: 'error'});
            this.broadcastStatus = -1
          }
      )

      this.broadcastRtc.on(
          ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
          (e) => {
            // offer anwser 交换失败
            console.error('offer anwser 交换失败', e)
            ElMessage({message: 'offer anwser 交换失败' + e, type: 'error'});
            this.broadcastStatus = -1
          }
      )
      this.broadcastRtc.on(
          ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE,
          (e) => {
            // offer anwser 交换失败
            console.log('状态改变', e)
            if (e == 'connecting') {
              this.broadcastStatus = 0
            } else if (e == 'connected') {
              this.broadcastStatus = 1
            } else if (e == 'disconnected') {
              this.broadcastStatus = -1
            }
          }
      )
      this.broadcastRtc.on(
          ZLMRTCClient.Events.CAPTURE_STREAM_FAILED,
          (e) => {
            // offer anwser 交换失败
            console.log('捕获流失败', e)
            ElMessage({message: '捕获流失败' + e, type: 'error'});
            this.broadcastStatus = -1
          }
      )
    },
    stopBroadcast() {
      if (this.broadcastStatus == -1) {
        return
      }
      this.broadcastRtc.close()
      this.broadcastStatus = -1
      broadcastStop(this.deviceId, this.channelId).then((res) => {
        if (res.code === 0) {
          // this.broadcastStatus = -1;
          // this.broadcastRtc.close()
        } else {
          // ElMessage.error(res.msg)
        }
      })
    },
    shot(e) {
      // console.log(e)
      // send({code:'image',data:e})
      var base64ToBlob = function (code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      };
      let aLink = document.createElement('a');
      let blob = base64ToBlob(e); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = '截图';
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
  },
}
</script>

<style>
.control-wrapper {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  max-width: 6.25rem;
  max-height: 6.25rem;
  border-radius: 100%;
  margin-top: 1.5rem;
  margin-left: 0.5rem;
  float: left;
}

.control-panel {
  position: relative;
  top: 0;
  left: 5rem;
  height: 11rem;
  max-height: 11rem;
}

.control-btn {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 5px;
  border: 1px solid #78aee4;
  box-sizing: border-box;
  transition: all 0.3s linear;
}

.control-btn:hover {
  cursor: pointer;
}

.control-btn i {
  font-size: 20px;
  color: #78aee4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-btn i:hover {
  cursor: pointer;
}

.control-zoom-btn:hover {
  cursor: pointer;
}

.control-round {
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  background: #fff;
  border-radius: 100%;
}

.control-round-inner {
  position: absolute;
  left: 13%;
  top: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 48px;
  width: 48px;
  font-size: 24px;
  color: #ffffff;
  background-color: #409eff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.control-inner-btn {
  position: absolute;
  width: 60%;
  height: 60%;
  background: transparent;
}

.control-top {
  top: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 8px;
}

.control-top i {
  transform: rotate(0deg);
}

.control-top .control-inner {
  left: 0;
  bottom: 0;
  border: none;
}

.control-top .fa {
  transform: rotate(0deg) translateY(0);
}

.control-left {
  top: 50%;
  left: 10px;
  transform: translateY(-50%) rotate(0deg);
}

.control-left i {
  transform: rotate(0deg);
}

.control-left .control-inner {
  right: 0;
  top: 0;
  border: none;
}

.control-left .fa {
  transform: rotate(0deg) translateX(0);
}

.control-right {
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(0deg);
}

.control-right i {
  transform: rotate(0deg);
}

.control-right .control-inner {
  left: 0;
  bottom: 0;
  border: none;
}

.control-right .fa {
  transform: rotate(0deg) translateX(0);
}

.control-bottom {
  left: 27%;
  bottom: -8%;
  transform: rotate(45deg);
  border-radius: 0 5px 100% 5px;
}

.control-bottom i {
  transform: rotate(-45deg);
}

.control-bottom .control-inner {
  top: -1px;
  left: -1px;
  border-bottom: 1px solid #78aee4;
  border-right: 1px solid #78aee4;
  border-radius: 0 0 100% 0;
}

.control-bottom .fa {
  transform: rotate(-45deg) translateY(7px);
}

.trank {
  width: 80%;
  height: 180px;
  text-align: left;
  padding: 0 10%;
  overflow: auto;
}

.trankInfo {
  width: 80%;
  padding: 0 10%;
}
</style>
